<template>
    <div @scroll="getMore" class="height-100b position-relative scroll-window" id="user-short">
        <template v-if="inited">
            <el-row :gutter="10" style="padding: 20px 30px;">
                <el-col :key="index" :span="12" v-for="(item, index) in data">
                    <div :class="{ 'mt-8': index >= 2 }" @click.stop="changeVideo(item, index)"
                        class="position-relative cursor-pointer">
                        <el-image :src="item.first_frame" fit="cover"
                            style="width: 100%; height: 200px;border-radius: 10px"></el-image>
                        <div class="video-data flex align-center">
                            <div class="font-12 flex align-center">
                                <el-image :src="require('@/assets/icon/video/viewed.png')" fit="cover"
                                    style="width: 18px;height:18px;"></el-image>
                                <span class="pl-5" style="color:#EFEFEF">{{ item.viewed }}</span>
                            </div>
                            <div class="font-12 flex align-center ml-10">
                                <el-image :src="require('@/assets/icon/video/liked.png')" fit="cover"
                                    style="width: 16px;height:16px;" v-if="item.liked_count"></el-image>
                                <el-image :src="require('@/assets/icon/video/like-grey-light.png')" fit="cover"
                                    style="width: 16px;height:16px;" v-else></el-image>
                                <span class="pl-5" style="color:#EFEFEF">{{ item.like_count }}</span>
                            </div>
                        </div>
                        <div v-if="creation.creation_id == item.creation_id"
                            style="position: absolute;top: 0; z-index: 99;height: 200px;width:100%;background-color: rgba(0, 0, 0, 0.5);border-radius: 10px">
                            <el-image :src="require('@/assets/gif/live_big.gif')" fit="cover"
                                style="width: 40px; height: 40px;margin-left: 42%;margin-top: 80px;"></el-image>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div class="text-center color-fff font-15 width-100% height-50">
                <el-image :src="require('@/assets/gif/global_loading.gif')" fit="cover" style="width: 40px;height:30px;"
                    v-show="append_loading"></el-image>
            </div>
        </template>
        <div v-else>
            <div class="flex jus-center align-center flex-dre-column" style="padding-top:20vh">
                <el-image :src="init_loading" fit="cover" style="width: 6vw; height: 3vw"></el-image>
            </div>
        </div>
    </div>
</template>

<script>
import pageTool from '@/mixins/page'
export default {
    data() {
        return {
            init_loading: require('@/assets/gif/re-video-loading.gif'),
            inited: true,
            query: {
                creation_type: 'short',
                user_id: null,
                size: 10,
            },
            data: []

        }
    },
    watch: {
        total(value) {
            this.$emit('creationTotal', value)
        },
    },

    props: {
        creation: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    mixins: [pageTool],
    mounted() {
        this.beforeInit()
    },
    methods: {
        beforeInit() {
            console.log('右边作品', this.creation.user_id)
            this.query.user_id = this.creation.user_id
            this.query.page = 1
            this.url = '/creation/index'
            this.append = true
            this.init()
                .then(() => {
                    console.log('作品数量', this.total)
                    this.$store.commit('CREATION_TOTAL', this.total)
                })
                .catch(() => { })
                .finally(() => {
                    this.inited = true
                })
        },
        getMore() {
            let e = document.getElementById('user-short')
            if (e.scrollTop + e.clientHeight >= e.scrollHeight - 50) {
                if (this.append_loading == true) {
                    return false
                }
                this.query.page++
                this.init()
            }
        },

        changeVideo(item, index) {
            this.$emit('changeVideo', item, index)
        },
    },
}
</script>

<style lang="scss" scoped>
.video-data {
    position: absolute;
    bottom: 6%;
    left: 6%;
}

.scroll-window {
    height: calc(100vh - 4rem - 69px);
    overflow-y: scroll;
}

.scroll-window::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
}</style>